// Generated using webpack-cli https://github.com/webpack/webpack-cli

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const entrys = require('./entry.pre')

const isProduction = process.env.NODE_ENV === 'development'

const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath')
const fs = require('fs')

const stylesHandler = 'style-loader'

const appDirectory = fs.realpathSync(process.cwd())
const resolveApp = relativePath => path.resolve(appDirectory, relativePath)

const config = {
  entry: Object.assign({},
    {
      'index': [
        require.resolve('react-dev-utils/webpackHotDevClient'),
        resolveApp('./src/index.js'),
      ]
    },
    //各页面入口
    entrys.blogEntry),
  output: {
    path: path.resolve(__dirname, 'dist'),
    // "homepage": "src",指定输出路径
    // publicPath: getPublicUrlOrPath(
    //   process.env.NODE_ENV === 'development',
    //   require(resolveApp('package.json')).homepage,
    //   process.env.PUBLIC_URL
    // )
    // __dirname代表的是当文件所在文件夹的绝对路径，xue-blog-web/  如果加上‘dist’就是xue-blog-web/dist
    // <script defer src="D:\xjy文件\项目\react测试\xue-blog-web\src/home.js"></script></head> 此时的路径
    // publicPath: path.resolve(__dirname, 'src')
    // 下面方式结果：<script defer src="D:\xjy文件\项目\react测试\xue-blog-web\src/home.js"></script>
    // publicPath: path.join(__dirname, 'src')
    publicPath: './'
  },
  devServer: {
    open: true,
    host: 'localhost',
    // publicPath: '/dist/', // 设置 publicPath
    hot: true, // 启用模块热替换
  },
  // resolve: {
  //   fallback: {
  //     'url': require.resolve('url/')
  //   }
  // },
  plugins: [
    //1、什么是Plugins?
    //plugins是在某个时刻(刚打包、打包结束，打包中间)做一件事
    //
    // 2、html-webpack-plugin
    // 在打包结束时，在dist自动生成html，并且把打包的main.js自动引入html的script的标签
    //
    // 3、clean-webpack-plugin
    // 在每次打包生成的dist文件前，先删除里面的内容
    // 使用web-dev-server启动后就会只将index.js打包到index.html中了
    new HtmlWebpackPlugin({
      // 这个实例有一个template属性，这个属性的值是一个模板的相对路径，注意是相对路径。
      template: './public/index.html',
      filename: 'index.html',
      chunks: ['index']
    })

    // Add your plugins here
    // Learn more about plugins from https://webpack.js.org/configuration/plugins/
  ].concat(entrys.blogPlugin)
  // .concat(
  //   new CleanWebpackPlugin(['dist']),
  // )
  ,
  module: {
    // 当需要配置多个 loader 或需要传递额外的选项时，可以使用 use 属性，它接受一个数组来定义加载器和相关的配置，例如：
    // module: {
    //   rules: [
    //     {
    //       test: /\.css$/,
    //       use: [
    //         'style-loader',
    //         {
    //           loader: 'css-loader',
    //           options: {
    //             // CSS 相关的选项配置...
    //           },
    //         },
    //       ],
    //     },
    //   ],
    // },
    rules: [
      {
        test: /\.(js|jsx)$/i,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.less$/i,
        exclude: /node_modules/,
        use: [stylesHandler, 'css-loader', 'postcss-loader', 'less-loader'],
      },
      {
        test: /\.css$/i,
        exclude: /node_modules/,
        use: [stylesHandler, {
          loader: 'css-loader',
          options: {
            importLoaders: 2,//表示scss文件导入了scss文件依然走postcss-loader sass-loader
            modules: true//开启css模块化
          }
        }, 'postcss-loader'],
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif|ico)$/i,
        exclude: /node_modules/,
        type: 'asset',
        use: [
          {
            loader: 'file-loader',
            options: {
              // name: '[name]_[hash].[ext]',
              outputPath: 'images/',//打包出的结果放在images/目录下
              limit: 10240
            }
          }
        ]
      },
      // css-loader:会帮我们分析几个css的关系（互相引入）合并成一个css
      // style-loader:当css-loader合并成了一个css,style-loader会把内容挂载到head部分
      // sass-loader:解析sass成css
      // postcss-loader:自动添加-webkit等前缀，兼容不同浏览器样式
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2
            }
          },
          'sass-loader',
          'postcss-loader'
        ]
      },

      // Add your rules for custom modules here
      // Learn more about loaders from https://webpack.js.org/loaders/
    ],
  },
}

module.exports = () => {
  if (isProduction) {
    config.mode = 'production'

  } else {
    config.mode = 'development'
  }
  return config
}
